<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="员工姓名" name="emp_name">
                    <a-input allowClear v-model:value="formState.emp_name" />
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                    <!-- <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button> -->
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-flex justify="flex-end">
                    <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
                </a-flex>
            </a-col>
        </a-row>
    </a-form>


    <a-row>
        <a-col :span="24">
            <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'name'">
                        <a>{{ text }}</a>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a @click="handleEdit(record)">编辑</a>
                        <a @click="handleDelete(record)">删除</a>
                    </template>
                </template>
            </a-table>
        </a-col>
    </a-row>

    <a-row>
        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" style="color: red"
            :title="addFormState.emp_id ? '编辑' : '新增'" placement="right">
            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout" @finish="addFormState.emp_id ? handleEditFinish($event) : handleAddFinish($event)">

                <a-form-item has-feedback label="员工姓名" name="emp_name">
                    <a-input v-model:value="addFormState.emp_name" />
                </a-form-item>

                <a-form-item has-feedback label="性别" name="gender">
                    <a-select allow-clear style="width: 100%" v-model:value="addFormState.gender">
                        <a-select-option :value="item.gender" v-for="item in [{ gender: '男' }, { gender: '女' }]"
                            :key="item.gender">
                            {{ item.gender }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="所属部门" name="dept_id">
                    <a-select allow-clear style="width: 100%" v-model:value="addFormState.dept_id">
                        <a-select-option :value="item.dept_id" v-for="item in departmentList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="岗位任职" name="position_id">
                    <a-select allow-clear style="width: 100%" v-model:value="addFormState.position_id">
                        <a-select-option :value="item.position_id" v-for="item in positionList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item has-feedback label="入职日期" name="hire_date">
                    <a-date-picker allow-clear style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        v-model:value="addFormState.hire_date" />
                </a-form-item>

                <a-form-item has-feedback label="联系电话" name="phone">
                    <a-input v-model:value="addFormState.phone" />
                </a-form-item>
                <a-form-item has-feedback label="在职状态" name="status">
                    <a-select allow-clear style="width: 100%" v-model:value="addFormState.status">
                        <a-select-option :value="item.status" v-for="item in statusList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="备注" name="notes">
                    <a-input v-model:value="addFormState.notes" />
                </a-form-item>


                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import { reactive, ref } from 'vue';
import service from '@/api/modulesApi/employee';
import { message } from 'ant-design-vue';

const departmentList = ref([]);
const getDepartment = async () => {
    const res = await service.getDepartment()
    departmentList.value = res.data
}
getDepartment()

const positionList = ref([]);
const getPosition = async () => {
    const res = await service.getPosition()
    positionList.value = res.data
}
getPosition()

const statusList = ref([]);
const getEmployeeStatus = async () => {
    const res = await service.getEmployeeStatus()
    statusList.value = res.data
}
getEmployeeStatus()

const columns = [
    {
        title: '员工编号',
        dataIndex: 'emp_id',
        key: 'emp_id',
    },
    {
        title: '员工姓名',
        dataIndex: 'emp_name',
        key: 'emp_name',
    },

    {
        title: '性别',
        dataIndex: 'gender',
        key: 'gender',
    },
    {
        title: '所属部门',
        dataIndex: 'dept_id',
        key: 'dept_id',
        customRender: ({ text, record }) => {
            return record.dept_name
        }
    },
    {
        title: '岗位',
        dataIndex: 'position_id',
        key: 'position_id',
        customRender: ({ text, record }) => {
            return record.position_name
        }
    },
    {
        title: '入职日期',
        dataIndex: 'hire_date',
        key: 'hire_date',
    },
    {
        title: '在职状态',
        dataIndex: 'status',
        key: 'status',
    },
    {
        title: '联系电话',
        dataIndex: 'phone',
        key: 'phone',
    },
    {
        title: '备注',
        dataIndex: 'notes',
        key: 'notes',
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',

    },
];
const data = ref([]);

const formRef = ref();
const formState = reactive({
    emp_name: '',
});

const open = ref(false);

const addFormState = reactive({
    emp_id: '',
    emp_name: '',
    dept_id: '',
    position_id: '',
    hire_date: '',
    status: '',
    phone: '',
    notes: '',
    gender: '',
});

const addFormRef = ref();

const addRulesForm = {
    emp_name: [{ required: true, message: '请输入员工姓名' }],
    gender: [{ required: true, message: '请选择性别' }],
    dept_id: [{ required: true, message: '请选择所属部门' }],
    position_id: [{ required: true, message: '请选择岗位' }],
    hire_date: [{ required: true, message: '请选择入职日期' }],
    status: [{ required: true, message: '请选择在职状态' }],
    phone: [
        { required: true, message: '请输入联系电话' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
};

const handleAdd = () => {
    open.value = true;
    addFormState.emp_id = ''
    addFormState.emp_name = ''
    addFormState.dept_id = ''
    addFormState.position_id = ''
    addFormState.hire_date = ''
    addFormState.status = ''
    addFormState.phone = ''
    addFormState.notes = ''
    addFormState.gender = ''
};

const handleAddFinish = async (values) => {
    await service.addEmployee(values)
    message.success('新增成功')
    getEmployee()
    addFormRef.value.resetFields();
    open.value = false;
};

const handleEditFinish = async (values) => {
    values.emp_id = addFormState.emp_id
    await service.updateEmployee(values)
    message.success('编辑成功')
    getEmployee()
    addFormRef.value.resetFields();
    open.value = false;
}

const handleEdit = async (record) => {
    console.log(record);
    const res = await service.getUpdateInit({ emp_id: record.emp_id })
    addFormState.emp_id = res.data[0].emp_id
    addFormState.emp_name = res.data[0].emp_name
    addFormState.dept_id = res.data[0].dept_id
    addFormState.position_id = res.data[0].position_id
    addFormState.hire_date = res.data[0].hire_date
    addFormState.status = res.data[0].status
    addFormState.phone = res.data[0].phone
    addFormState.notes = res.data[0].notes
    addFormState.gender = res.data[0].gender
    open.value = true;
}

const handleDelete = async (record) => {
    await service.deleteEmployee({ emp_id: record.emp_id })
    message.success('删除成功')
    getEmployee()
}

const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
};

const handleFinish = (values) => {
    console.log(values, formState);
    getEmployee()
};

const getEmployee = async () => {
    const res = await service.getEmployee(formState)
    data.value = res.data
}
getEmployee()
</script>